সিএসএস(৩) shadow ব্যবহার করে আপনি যেকোনো এলিমেন্টে বা এলিমেন্টের টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।
নিম্নে যথাক্রমে text-shadow এবং box-shadow প্রোপার্টির ব্যবহার দেখানো হলোঃ
সিএসএস(৩)text-shadow প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।
একটি এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হবে। স্যাডো ইফেক্টের ডিফল্ট কালার কালো থাকে।
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px orange;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #C0A 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: green 2px 5px;
/* offset-x | offset-y
/* color এবং blur-radius ডিফল্টভাবে ব্যবহৃত হবে*/
text-shadow: 5px 10px;text-shadow প্রোপার্টির একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা আলাদা করতে হয়।
যখন একের অধিক স্যাডো দেওয়া হয় তখন front-to-back অর্থাৎ সামনে থেকে পিছনে স্যাডোর প্রয়োগ ঘটে, যেখানে প্রথম নির্ধারিত স্যাডো সবার উপরে বা সম্মুখে থাকে।
এই প্রোপার্টিটি ::first-line এবং ::first-letter সুডো(pseudo) এলিমেন্টেও প্রয়োগ করা যায়।
নিম্নের উদাহরণে বিভিন্ন প্রকার স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>text shadow</title>
<style>
div {
font-size: 24px;
width: 95%;
height: auto;
padding:7px;
border: 2px dotted orange;
}
/* সাধারণ স্যাডো ইফেক্ট */
#div1 {
text-shadow: 2.5px 2.5px;
}
/* সবুজ কালারের স্যাডো ইফেক্ট */
#div2 {
text-shadow: 2.5px 2.5px green;
}
/* blur বা অস্পষ্ট স্যাডো ইফেক্ট */
#div3 {
text-shadow: 2.5px 2.5px 6px; green;
}
/* সাদা কালারের টেক্সটে লাল কালারের স্যাডো ইফেক্ট */
#div4 {
color: white;
text-shadow: 2px 2px 4px red;
}
/* সবুজ কালারের অস্পষ্ট স্যাডো ইফেক্ট */
#div5 {
text-shadow: 0 0 3px green;
}
</style>
</head>
<body>
<p>নিম্নের div এলিমেন্টে অনুভূমিক বা X-অক্ষ বরাবর 2.5px এবং উলম্ব বা Y-অক্ষ বরাবর 2.5px স্যাডো ইফেক্ট যুক্ত করা হয়েছ।</p>
<div id="div1">ডিফল্ট কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে অনুভূমিক বা X-অক্ষ বরাবর 2.5px এবং উলম্ব বা Y-অক্ষ বরাবর 2.5px সবুজ কালারের স্যাডো ইফেক্ট যুক্ত করা হয়েছ।</p>
<div id="div2">সবুজ কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে টেক্সট স্যাডোর সাথে blur বা অস্পষ্ট ইফেক্ট যুক্ত করা হয়েছেঃ</p>
<div id="div3">অস্পষ্ট টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে সাদা কালারের টেক্সটে লাল কালারের স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div4">সাদা কালারের সাথে লাল কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে টেক্সটের উপর সবুজ কালারের অস্পষ্ট স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div5">সবুজ কালারের অস্পষ্ট টেক্সট-স্যাডো ইফেক্ট!</div>
<p><strong>বিঃদ্রঃ</strong> ইন্টারনেট এক্সপ্লোরার ৯ এবং
পূর্ববর্তী ভার্সনে text-shadow প্রোপার্টি সাপোর্ট করে না।</p>
</body>
</html>
একটি টেক্সটে একাধিক স্যাডো যুক্ত করার জন্য আপনাকে text-shadow প্রোপার্টিতে স্যাডো ইফেক্টের ভ্যালুগুলো ক্রমান্বয়ে একাধিক বার লিখতে হবে এবং ভ্যালু গুলোকে আলাদা করার জন্য কমা(,) চিহ্ন ব্যবহার করতে হবে।
নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>multiple text shadow</title>
<style>
div {
font-size: 24px;
width: 95%;
height: auto;
padding:7px;
border: 2px dotted orange;
}
/* একাধিক স্যাডো ইফেক্টকে কমা দ্বারা আলাদা করা হয়েছে */
#div1 {
text-shadow: 0 0 3px red, 0 0 5px blue;
}
#div2 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<p>নিম্নের div এলিমেন্টে টেক্সটের উপর হালকা অস্পষ্ট লাল কালার এবং তার চেয়ে বেশী অস্পষ্ট নীল কালারের দুটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div1">টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে টেক্সটের উপর কালো কালার এবং অধিক অস্পষ্ট নীল কালার এবং এর চেয়ে কম অস্পষ্ট গাঢ়-নীল কালারের তিনটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div2">টেক্সট-স্যাডো ইফেক্ট!</div>
</body>
</html>নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করে দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>multiple text shadow</title>
<style>
div {
font-size: 24px;
width: 95%;
height: auto;
padding:7px;
border: 2px dotted orange;
}
/* একাধিক স্যাডো ইফেক্টকে কমা দ্বারা আলাদা করা হয়েছে */
#div1 {
text-shadow: 0 0 3px red, 0 0 5px blue;
}
#div2 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<p>নিম্নের div এলিমেন্টে টেক্সটের উপর হালকা অস্পষ্ট লাল কালার এবং তার চেয়ে বেশী অস্পষ্ট নীল কালারের দুটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div1">টেক্সট-স্যাডো ইফেক্ট!</div>
<p>নিম্নের div এলিমেন্টে টেক্সটের উপর কালো কালার এবং অধিক অস্পষ্ট নীল কালার এবং এর চেয়ে কম অস্পষ্ট গাঢ়-নীল কালারের তিনটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="div2">টেক্সট-স্যাডো ইফেক্ট!</div>
</body>
</html>সিএসএস(৩) box-shadow প্রোপার্টি ব্যবহার করে আপনি যে কোনো এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন। একাধিক স্যাডো ইফেক্টকে কমা দ্বারা পৃ্থক করতে হয়।
বক্স-স্যাডোর বিভিন্ন সিনট্যাক্স
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(100, 100, 100, 0.4);
/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 5px 5px green;
/* offset-x | offset-y | color */
box-shadow: 15px -10px orange;
/* default color */
/* offset-x | offset-y */
box-shadow: 15px -10px;
/* inset | offset-x | offset-y |blur-radius | color */
box-shadow: inset 2px 2px 1em red;
/* একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হয় */
box-shadow: 3px 3px red, -1em 0 0.4em olive;একটি একক box-shadow তৈরি করার জন্য নিম্নোক্ত প্যারামিটার বা ভ্যালুগুলো ব্যবহার করতে হয়।
নিম্নের উদাহরণে বিভিন্ন প্রকার বক্স স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>box shadow property</title>
<style>
div {
margin:15px;
width: 80%;
height: 60px;
padding: 20px;
background-color: orange;
}
/* সাধারণ স্যাডো ইফেক্ট */
#shadow1{
box-shadow: 12px 12px;
}
/* কালার স্যাডো ইফেক্ট */
#shadow2{
box-shadow: 12px 12px lightsalmon;
}
/* blur স্যাডো ইফেক্ট */
#shadow3{
box-shadow: 12px 12px 5px lightsalmon;
}
/* inset স্যাডো ইফেক্ট */
#shadow4{
box-shadow: inset 2px 2px 1em gold;
}
</style>
</head>
<body>
<p>নিম্নের div এলিমেন্টে দুটি ভ্যালু ব্যবহার করে অনুভূমিক এবং উলম্বভাবে স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
<div id="shadow1"><code>box-shadow: 12px 12px;</code></div>
<p>এখন আমরা একই এলিমেন্টে কালার স্যাডো যুক্ত করবোঃ</p>
<div id="shadow2"><code>box-shadow: 12px 12px lightsalmon;</code></div>
<p>এখন আমরা একই এলিমেন্টে কালার স্যাডোর সাথে blur ইফেক্ট যুক্ত করবোঃ</p>
<div id="shadow3"><code>box-shadow: 12px 12px;</code></div>
<p> inset এর মাধ্যমে এলিমেন্টের ভেতরে blur স্যাডো ইফেক্ট যুক্ত করা হয়েছেঃ</p>
<div id="shadow4"><code>box-shadow: inset 2px 2px 1em gold;</code></div>
</body>
</html>::before এবং ::after এর ব্যবহারআরও আকর্ষনীয় ইফেক্ট তৈরি করতে আপনি স্যাডোর সাথে ::before এবং ::after সুডো-ক্লাস(pseudo-class) যুক্ত করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>before after pseudo efect</title>
<html>
<head>
<style>
#shadow {
position: relative;
box-shadow: 2px 2px 4px rgba(0, 100, 0, .4);
padding: 10px;
background: aqua;
}
/* বক্স অনুসারে ইমেজ নির্ধারণ*/
#shadow img {
width: 100%;
height: 150px;
border: 1px dotted teal;
border-style: double;
}
#shadow::after {
content: '';
position: absolute;
box-shadow: 0 20px 2px rgba(0, 100, 0, 0.4);
width: 50%;
left: 25%; /* বাকি ৫০% এর অর্ধেক */
height: 50px;
bottom: 0;
z-index: -1; /* ইমেজের পিছনে স্যাডো লুকানো */
}
</style>
</head>
<body>
<div id="shadow">
<img src="..//css_examples/satt_bangla1.jpg" alt="beautiful scenery">
</div>
</body>
</html>
আপনি box-shadow প্রোপার্টি ব্যবহার করে যেকোনো এলিমেন্টকে কার্ডে রুপান্তর করাতে পারবেন।
kt_satt_skill_example_id=1530
Read more
or
